import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { add_reminder,del_reminder,clean_reminder } from '@/action';
@connect(state=>({
  list: state.todoList
}),{add_reminder,del_reminder,clean_reminder})
class TodoList extends Component{
  constructor(props){
    super(props);
    this.state = {
      content: '',
      time: ''
    }
  }
  check_can_use(){
    return this.state.content && this.state.time;
  }
  static propTypes = {
    list: PropTypes.array.isRequired
  }
  render(){
    const {list,add_reminder,del_reminder,clean_reminder} = this.props;
    console.log(this.props);
    return (
      <div>
        <div className="row">
          <div className="col-sm">
            <input type="text"
            className="form-control" 
            placeholder="will doing"
            value={this.state.content}
            onChange={(e)=>{this.setState({content:e.target.value})}}
            />
          </div>
          <div className="col-sm">
            <input 
            type="datetime-local" 
            className="form-control"
            value={this.state.time}
            onChange={(e)=>{this.setState({time:e.target.value})}}
            />
          </div>
          <div className="col-sm">
            <button 
            className="btn btn-primary btn-block"
            disabled={!this.check_can_use()}
            onClick={()=>{add_reminder(this.state);this.setState({content:'',time:''})}}
            >Create</button>
          </div>
        </div>
        <ul className="list-group">
          {
            list.map((item, index) => (
              <li key={index} className="list-group-item">
                <button 
                className="close"
                onClick={()=>{del_reminder(item.id)}}
                >&times;</button>
                <p>{item.content}</p>
                <p>{item.time}</p>
              </li>
            ))
          }
        </ul>
        {
          do {
            if (list.length > 0){
              <button 
              className="btn btn-block btn-danger"
              onClick={()=>{clean_reminder()}}
              >Clean All Reminder</button>
            }else{
              <p>暂无内容...</p>
            }
          }
        }
      </div>
      )
  }
};
export default TodoList;